// 获取用户的ID
let user = localStorage.getItem("username");
// 获取有数据的购物车
let pulEle = document.querySelector(".cart-item-list");
// 发送ajax
ajax({
	url: "./rendCart.php",
	dataType: "json",
	data: {
		user
	}
}).then(res => {
	res.forEach(item=>{
		item.check=true;
	})
	// console.log("??",res);
	rendDom(res); //渲染数据
})

// 数据驱动视图
function rendDom(res) {
	let pulEle = document.querySelector(".cart-item-list");
	pulEle.innerHTML = "";
	res.forEach(item => {
		pulEle.innerHTML += `
						<li class="container1">
						<input class="p_check" type="Checkbox" name="" id="" value="" />
						<div class="cart-item-pic">
							<img src="${item.goodsimg}" alt="">
						</div>
						<div class="item-name">${item.goodsname}</div>
						<div class="item-price">￥${item.goodsprice}</div>
						<div class="item-quantity">
							<a href="" class="p_min" cid="${item.cid}" style="cursor: pointer;">-</a>
							<input class="p_num" type="text" value="${item.num}" readonly="readonly"style="text-align:center">
							<a href="" class="p_add" cid="${item.cid}" style="cursor: pointer;">+</a>
						</div>
						<div class="item-price-total">${item.num * item.goodsprice}</div>
						<div class="item-delgoods" style="cursor: pointer;width:80px" cid="${item.cid}">删除</div>
						</li>
			`
		countOne(res);	
		delEvent();
	})
	addEvent(res);
	CheckALL(res);

}

// 全选事件
function CheckALL(res) {
	// console.log(res)
	//获取全选框
	let checkAllEle = document.querySelector("#checkall");
	//所有单选框
	let checkEle = document.querySelectorAll(".p_check");
	checkAllEle.onclick = function() {
		//全选全不选
		checkEle.forEach(item => {
			item.checked = this.checked;
		})
		res.forEach(items => {
			items.check = !items.check;
		})
		countPrice(res);
	}
	checkEle.forEach((it, key) => {
		it.onclick = function() {
			checkAllEle.checked = isAllChecked();
			res[key].check = !res[key].check;
			it.check = !it.check;
			console.log(it);
			if (it.checked == false) {
				checkAllEle.checked = false;
			}
			countPrice(res);

		}
	})
	//判断是否为全选
	function isAllChecked() {
		for (var j = 0; j < checkEle.length; j++) {
			if (!checkEle[j].checked)
				return false;
		}
		return true;
	}
}


//添减产品数量
function addEvent(res) {
	let iqEle = document.querySelectorAll(".item-quantity");
	// console.log(iqEle)
	iqEle.forEach((item, key) => {
		// console.log(item)
		item.onclick = function(e) {
			let event = e || window.event;
			var target = event.target; //目标
			if (target.innerText === "+") {
				console.log("点击了加号", target);
				let cid = res[key].cid;
				// console.log(cid)
				// 发送ajax
				ajax({
					url: "./addNum.php",
					dataType: "json",
					data: {
						cid
					}
				}).then(res => {
					let inpVal = this.firstElementChild.nextElementSibling;
					if (res.status == "1") {
						inpVal.value++;
						res[key].num++;
						countPrice(res);
						countOne(res);
					}
				})
			} else if (target.innerText === "-") {
				let cid = res[key].cid;
				ajax({
					url: "./minNum.php",
					dataType: "json",
					data: {
						cid
					}
				}).then(res => {
					let inpVal = this.firstElementChild.nextElementSibling;
					if (res.status == "1") {
						if (inpVal.value > 1) {
							inpVal.value--;
							res[key].num--;
							countPrice(res);
							countOne(res);
						} else {
							inpVal.value = 1;
							alert("商品数量最小为1!");
						}
					}
				})
			}
		}
	})
}



// 每行商品的总金额
function countOne(res){
	$(".p_add").click(function(){
		var n = $(this).siblings(".p_num").val();
		n = parseInt(n)+1;
		var p = $(this).parent().siblings(".item-price").html();//html括号里不赋值就是获取里面的值
		p = p.substr(1);
		$(this).parent().siblings(".item-price-total").html("￥"+p * n);//html括号里给赋值就是获取里面的值
	});
	$(".p_min").click(function(){
		var n = $(this).siblings(".p_num").val();
		n = parseInt(n)-1;
		if(n<1){
			n = 1;
		}
		var p = $(this).parent().siblings(".item-price").html();
		p = p.substr(1);
		$(this).parent().siblings(".item-price-total").html("￥"+p * n);
	})
};


// 计算总的价格 
function countPrice(res) {
	let totalPriceEle = document.querySelector(".cart-total-sp");
	let total = 0;
	if (res == "" || res == null) {
		totalPriceEle.innerText = "¥0.00";
	}
	res.forEach(item => {
		if (item.check) {
			total += item.num * item.goodsprice;
		}
	})
	totalPriceEle.innerText = total + "元";
}

// 删除功能
function delEvent(data) {
	let delEles = document.querySelectorAll(".item-delgoods");
	delEles.forEach((delEle, key) => {
		delEle.onclick = function() {
			// 调取ajax 删除数据库
			let cid = delEle.getAttribute("cid");
			console.log(cid);
			ajax({
				url: "./delcart.php",
				data: {
					cid
				},
				dataType: "json"
			}).then(res => {
				if (res.status == "1") {
					ajax({
						url: "./rendCart.php",
						dataType: "json",
						data: {
							user
						}
					}).then(res => {
						// res.forEach(item => {
						// 	item.check = true;
						// })
						alert("确认删除?");
						rendDom(res);
						countPrice(res);
						CheckALL(res);
					})
				}

			})
		}
	})
}

